<template>
  <div class="min-h-screen bg-white">
    <!-- 导航栏 -->
    <nav
      class="fixed top-0 left-0 right-0 bg-gradient-to-r from-purple-50 via-white to-pink-50 shadow-sm z-50"
    >
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-center justify-between h-16">
          <div class="flex items-center">
            <div class="text-2xl font-serif text-purple-900">丝韵NFT</div>
          </div>
          <div class="hidden md:flex items-center space-x-8">
            <a href="#" class="text-gray-700 hover:text-purple-900">首页</a>
            <a href="#" class="text-gray-700 hover:text-purple-900">商品分类</a>
            <a href="#" class="text-gray-700 hover:text-purple-900">艺术家</a>
            <a href="#" @click="goToTracePage" class="text-gray-700 hover:text-purple-900">溯源查询</a>
            <div class="relative">
              <input
                type="text"
                class="w-48 py-2 pl-10 pr-4 text-sm text-gray-700 bg-gray-100 rounded-lg border-none focus:outline-none focus:ring-2 focus:ring-purple-500"
                placeholder="搜索丝绸艺术品..."
                v-model="searchQuery"
              />
              <i
                class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"
              ></i>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <i class="el-icon-user-solid"></i>
            <i class="el-icon-shopping-cart-2"></i>
            <!-- <button
              @click="showLoginModal = true"
              class="text-gray-700 hover:text-purple-900"
            >
              <i class="fas fa-user text-lg"></i>
            </button>
            <button
              class="text-gray-700 hover:text-purple-900 relative"
              @click="showCart = true"
            >
            <i class="el-icon-shopping-cart-full "></i>
              <span
                class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center"
              >
                {{ cartCount }}
              </span>
            </button> -->
          </div>
        </div>
      </div>
    </nav>
    <!-- 主轮播图 -->
    <div class="relative h-[500px] overflow-hidden">
      <el-carousel
        :interval="5000"
        indicator-position="outside"
        arrow="always"
        height="500px"
      >
        <el-carousel-item
          style="height: 500px"
          v-for="(slide, index) in bannerSlides"
          :key="index"
        >
          <div class=" h-full">
            <img
              :src="slide.image"
              class="w-full h-full object-cover"
              :alt="slide.title"
            />
            <div
              class="absolute inset-0 bg-gradient-to-r from-black/50 to-transparent"
            >
              <div class="max-w-7xl mx-auto px-4 h-full flex items-center">
                <div class="text-white max-w-xl">
                  <h2 class="text-4xl font-bold mb-4">{{ slide.title }}</h2>
                  <p class="text-lg mb-6">{{ slide.description }}</p>
                  <el-button
                    class="!rounded-button bg-white text-purple-900 px-8 py-3 font-medium hover:bg-purple-100 transition-colors"
                  >
                    立即探索
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 热门藏品 -->
    <section class="py-16 bg-gradient-to-r from-purple-100/30 to-pink-100/30">
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center mb-8">
          <h2
            class="text-3xl font-bold text-gray-900 bg-gradient-to-r from-purple-900 to-pink-900 bg-clip-text text-transparent"
          >
            热门藏品
          </h2>
          <a
            @click="goToMorePage"
            class="text-purple-900 hover:text-purple-700 flex items-center"
          >
            查看更多 <i class="fas fa-arrow-right ml-2"></i>
          </a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
          <div
            v-for="(item, index) in hotItems"
            :key="index"
            class="bg-white rounded-lg shadow-lg overflow-hidden transform hover:-translate-y-1 transition-transform duration-300"
          >
            <div class="relative h-64">
              <img
                :src="item.image"
                class="w-full h-full object-cover"
                :alt="item.name"
              />
            </div>
            <div class="p-4">
              <h3 class="text-lg font-medium text-gray-900">{{ item.name }}</h3>
              <p class="text-sm text-gray-500 mb-2">{{ item.artist }}</p>
              <div class="flex justify-between items-center">
                <span class="text-purple-900 font-bold"
                  >{{ item.price }} ETH</span
                >
                <button
                  class="!rounded-button bg-gradient-to-r from-purple-900 to-pink-900 text-white px-4 py-2 text-sm hover:from-purple-800 hover:to-pink-800"
                >
                  立即购买
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 新品首发 -->
    <section class="py-16 bg-gradient-to-r from-purple-100 to-pink-100">
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center mb-8">
          <h2
            class="text-3xl font-bold text-gray-900 bg-gradient-to-r from-purple-900 to-pink-900 bg-clip-text text-transparent"
          >
            新品首发
          </h2>
          <a
            href="#"
            @click="goToMorePage"
            class="text-purple-900 hover:text-purple-700 flex items-center"
          >
            查看更多 <i class="fas fa-arrow-right ml-2"></i>
          </a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-6">
          <div
            v-for="(item, index) in newItems"
            :key="index"
            class="bg-white rounded-lg shadow-lg overflow-hidden transform hover:-translate-y-1 transition-transform duration-300"
          >
            <div
              class="bg-gradient-to-br from-white to-pink-50/30 rounded-lg shadow-lg overflow-hidden"
            >
              <div class="relative h-72">
                <img
                  :src="item.image"
                  class="w-full h-full object-cover"
                  :alt="item.name"
                />
                <div
                  class="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 rounded text-sm"
                >
                  限量 {{ item.limited }} 份
                </div>
              </div>
              <div class="p-4">
                <h3 class="text-lg font-medium text-gray-900">
                  {{ item.name }}
                </h3>
                <p class="text-sm text-gray-500 mb-2">{{ item.description }}</p>
                <div class="flex justify-between items-center">
                  <span class="text-purple-900 font-bold"
                    >{{ item.price }} ETH</span
                  >
                  <div class="text-sm text-gray-500">
                    剩余时间: {{ item.countdown }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 收藏品分类 -->
    <section class="py-16 bg-gradient-to-r from-pink-100/30 to-purple-100/30">
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center mb-8">
          <h2
            class="text-3xl font-bold text-gray-900 bg-gradient-to-r from-pink-900 to-purple-900 bg-clip-text text-transparent"
          >
            收藏品分类
          </h2>
          <a
            href="#"
            @click="goToMorePage"
            class="text-purple-900 hover:text-purple-700 flex items-center"
          >
            查看更多 <i class="fas fa-arrow-right ml-2"></i>
          </a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
          <div
            v-for="(category, index) in categories"
            :key="index"
            class="relative group cursor-pointer overflow-hidden rounded-lg"
          >
            <div class="h-48 relative overflow-hidden">
              <img
                :src="category.image"
                class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-300"
                :alt="category.name"
              />
              <div
                class="absolute inset-0 bg-black bg-opacity-40 group-hover:bg-opacity-50 transition-opacity"
              ></div>
              <div class="absolute inset-0 flex items-center justify-center">
                <span class="text-white text-xl font-medium">{{
                  category.name
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 用户评论 -->
    <section class="py-16 bg-gradient-to-r from-purple-100 to-pink-100">
      <div class="max-w-7xl mx-auto px-4">
        <h2
          class="text-3xl font-bold mb-8 bg-gradient-to-r from-purple-900 to-pink-900 bg-clip-text text-transparent"
        >
          藏家心声
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div
            v-for="(review, index) in reviews"
            :key="index"
            class="bg-white rounded-lg shadow-lg p-6"
          >
            <div class="flex items-center mb-4">
              <img
                :src="review.avatar"
                class="w-12 h-12 rounded-full"
                :alt="review.name"
              />
              <div class="ml-4">
                <h3 class="font-medium text-gray-900">{{ review.name }}</h3>
                <div class="flex text-yellow-400">
                  <i
                    v-for="n in 5"
                    :key="n"
                    :class="[
                      'fas',
                      n <= review.rating ? 'fa-star' : 'fa-star text-gray-300',
                    ]"
                  ></i>
                </div>
              </div>
            </div>
            <p class="text-gray-600 mb-4">{{ review.content }}</p>
            <div
              class="flex items-center justify-between text-sm text-gray-500"
            >
              <span>购买商品：{{ review.product }}</span>
              <span>{{ review.date }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 登录弹窗 -->
    <el-dialog :visible.sync="showLoginModal" title="登录" width="400px">
      <div slot="footer" class="dialog-footer">
        <button
          @click="showLoginModal = false"
          class="el-button el-button--text"
        >
          取消
        </button>
        <button class="el-button el-button--primary" @click="handleLogin">
          登录
        </button>
      </div>
      <div class="p-4">
        <button
          class="!rounded-button w-full bg-gradient-to-r from-purple-900 to-pink-900 text-white py-3 flex items-center justify-center space-x-2 hover:from-purple-800 hover:to-pink-800"
        >
          <i class="fab fa-ethereum"></i>
          <span>连接钱包</span>
        </button>
        <div class="relative my-4">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white text-gray-500">或</span>
          </div>
        </div>
        <el-input
          v-model="loginForm.username"
          placeholder="邮箱/手机号"
          class="custom-login-input"
        ></el-input>
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="密码"
          class="custom-login-input"
        ></el-input>
        <div class="text-center text-sm mt-4">
          <span class="text-gray-600">还没有账号？</span>
          <a href="#" class="text-purple-900 hover:text-purple-700">立即注册</a>
        </div>
      </div>
    </el-dialog>
    <!-- 购物车弹窗 -->
    <el-dialog :visible.sync="showCart" title="购物车" width="400px">
      <div slot="footer" class="dialog-footer">
        <button @click="showCart = false" class="el-button el-button--text">
          取消
        </button>
        <button class="el-button el-button--primary" @click="handleCheckout">
          结算
        </button>
      </div>
      <div class="p-4">
        <div
          v-if="cartItems.length === 0"
          class="text-center py-8 text-gray-500"
        >
          购物车是空的
        </div>
        <div v-else class="space-y-4">
          <div
            v-for="(item, index) in cartItems"
            :key="index"
            class="flex items-center space-x-4"
          >
            <img
              :src="item.image"
              class="w-20 h-20 object-cover rounded"
              :alt="item.name"
            />
            <div class="flex-1">
              <h4 class="font-medium">{{ item.name }}</h4>
              <p class="text-gray-500">{{ item.price }} ETH</p>
            </div>
            <button
              class="text-red-500 hover:text-red-700"
              @click="removeFromCart(index)"
            >
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>
        <div class="flex justify-between items-center mb-4">
          <span class="font-medium">总计</span>
          <span class="text-purple-900 font-bold">{{ cartTotal }} ETH</span>
        </div>
      </div>
    </el-dialog>
    <!-- 回到顶部按钮 -->
    <button
      v-show="showBackTop"
      @click="scrollToTop"
      class="!rounded-button fixed bottom-8 right-8 bg-purple-900 text-white w-12 h-12 flex items-center justify-center shadow-lg hover:bg-purple-800"
    >
      <i class="el-icon-top"></i>
    </button>
    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-16">
      <div class="max-w-7xl mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h3 class="text-2xl font-serif mb-4">丝韵NFT</h3>
            <p class="text-gray-400">传承千年丝绸艺术，链接数字未来</p>
            <div class="flex space-x-4 mt-4">
              <a href="#" class="text-gray-400 hover:text-white">
                <i class="fab fa-twitter text-xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white">
                <i class="fab fa-instagram text-xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white">
                <i class="fab fa-discord text-xl"></i>
              </a>
            </div>
          </div>
          <div>
            <h4 class="font-medium mb-4">快速链接</h4>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-gray-400 hover:text-white">市场</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">艺术家</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">收藏品</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">社区</a>
              </li>
            </ul>
          </div>
          <div>
            <h4 class="font-medium mb-4">帮助中心</h4>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-gray-400 hover:text-white">新手指南</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">常见问题</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">用户协议</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">隐私政策</a>
              </li>
            </ul>
          </div>
          <div>
            <h4 class="font-medium mb-4">订阅更新</h4>
            <p class="text-gray-400 mb-4">获取最新艺术品和活动信息</p>
            <div class="flex">
              <input
                type="email"
                placeholder="输入邮箱地址"
                class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500 w-full"
              />
              <button
                class="!rounded-button bg-purple-900 text-white px-4 py-2 rounded-r-lg hover:bg-purple-800"
              >
                订阅
              </button>
            </div>
          </div>
        </div>
        <div
          class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"
        >
          <p>&copy; 2025 丝韵NFT. 保留所有权利</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
// import Vue from "vue";
// import ElementUI from "element-ui";
// import "element-ui/lib/theme-chalk/index.css";
// import "font-awesome/css/font-awesome.min.css";

// Vue.use(ElementUI);

export default {
  data() {
    return {
      searchQuery: "",
      showLoginModal: false,
      showCart: false,
      showBackTop: false,
      cartCount: 2,
      cartTotal: 1.24,
      loginForm: {
        username: "",
        password: "",
      },
      bannerSlides: [
        {
          image: require("@/assets/tu/tu5.jpg"),
          title: "传统丝绸艺术，遇见数字永恒",
          description:
            "探索独特的数字丝绸艺术品，将千年工艺与区块链技术完美融合",
        },
        {
          image: require("@/assets/tu/tu6.jpg"),
          title: "匠心独运的丝绸艺术",
          description: "每一件作品都是艺术家的心血结晶，独一无二的收藏价值",
        },
      ],
      hotItems: [
        {
          image: require("@/assets/tu/tu1.jpg"),
          name: "紫金云锦丝巾",
          artist: "张明华",
          price: "0.88",
        },
        {
          image: require("@/assets/tu/tu2.jpg"),
          name: "翡翠旗袍",
          artist: "李玉婷",
          price: "1.28",
        },
        {
          image: require("@/assets/tu/tu3.jpg"),
          name: "山水织锦",
          artist: "王德明",
          price: "2.35",
        },
        {
          image: require("@/assets/tu/tu4.jpg"),
          name: "孔雀刺绣",
          artist: "陈巧玲",
          price: "1.56",
        },
      ],
      newItems: [
        {
          image: require("@/assets/tu/tu7.jpg"),
          name: "现代水墨丝绸画",
          description: "现代艺术与传统丝绸的碰撞",
          price: "3.28",
          limited: 50,
          countdown: "23小时28分",
        },
        {
          image: require("@/assets/tu/tu8.jpg"),
          name: "几何织锦方巾",
          description: "东方建筑美学的现代诠释",
          price: "0.98",
          limited: 100,
          countdown: "2天12小时",
        },
        {
          image: require("@/assets/tu/tu9.jpg"),
          name: "新中式丝绸裙",
          description: "传统与时尚的完美融合",
          price: "2.68",
          limited: 30,
          countdown: "1天8小时",
        },
      ],
      categories: [
        {
          name: "丝巾系列",
          image: require("@/assets/tu/tu10.jpg"),
        },
        {
          name: "旗袍系列",
          image: require("@/assets/tu/tu11.jpg"),
        },
        {
          name: "织锦系列",
          image: require("@/assets/tu/tu12.jpg"),
        },
        {
          name: "刺绣艺术",
          image: require("@/assets/tu/tu13.jpg"),
        },
        {
          name: "现代系列",
          image: require("@/assets/tu/tu14.jpg"),
        },
      ],
      reviews: [
        {
          avatar: require("@/assets/tu/tu15.jpg"),
          name: "林雨萱",
          rating: 5,
          content:
            "作为一个传统丝绸收藏爱好者，这个平台让我找到了很多珍贵的艺术品。每件作品都充满了匠人的心血，非常值得收藏。",
          product: "紫金云锦丝巾",
          date: "2025-02-15",
        },
        {
          avatar: require("@/assets/tu/tu16.jpg"),
          name: "赵建国",
          rating: 4,
          content:
            "平台的防伪认证系统让人非常放心，购买过程很流畅。客服的专业程度也很高，解答了我很多关于丝绸保养的问题。",
          product: "山水织锦",
          date: "2025-02-16",
        },
        {
          avatar: require("@/assets/tu/tu17.jpg"),
          name: "杨雪婷",
          rating: 5,
          content:
            "第一次在区块链平台购买艺术品，没想到体验这么好。尤其喜欢平台提供的艺术品背后的故事介绍，让收藏更有意义。",
          product: "翡翠旗袍",
          date: "2025-02-17",
        },
      ],
      cartItems: [
        {
          image: require("@/assets/tu/tu1.jpg"),
          name: "紫金云锦丝巾",
          price: "0.88",
        },
        {
          image: require("@/assets/tu/tu3.jpg"),
          name: "山水织锦",
          price: "0.36",
        },
      ],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.showBackTop = window.pageYOffset > 300;
    },
    goToMorePage() {
      this.$router.push('/nft/list');
    },
    goToTracePage() {
      this.$router.push('/blockTrace/index');
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    handleLogin() {
      // 这里添加登录逻辑，例如发送请求到后端验证
      this.showLoginModal = false;
    },
    handleCheckout() {
      // 这里添加结算逻辑，例如计算总价、提交订单等
      this.showCart = false;
    },
    removeFromCart(index) {
      this.cartItems.splice(index, 1);
      // 重新计算购物车数量和总价
      this.cartCount = this.cartItems.length;
      this.cartTotal = this.cartItems.reduce(
        (acc, item) => acc + parseFloat(item.price),
        0
      );
    },
  },
};
</script>

<style scoped>
@import "../..//assets/tailwind.css";
.custom-login-input {
  @apply w-full px-4 py-2 border border-gray-300 rounded-lg;
}
.custom-login-input:focus {
  @apply outline-none ring-2 ring-purple-500 border-transparent;
}
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* 移除number输入框的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>